<template>
  <div class="question">
    <el-card class="question-top">
      <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
        <el-form-item prop="subject" label="学科">
          <el-select v-model="form.subject" placeholder="请选择">
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.short_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="step" label="阶段">
          <el-select v-model="form.step" placeholder="请选择">
            <el-option
              v-for="(item, index) in stepItem"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="enterprise" label="企业">
          <el-select v-model="form.enterprise" placeholder="请选择">
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="type" label="题型">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="(item, index) in typeItem"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="difficulty" label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option
              v-for="(item, index) in diffItem"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="username" label="作者">
          <el-input v-model="form.username" class="top-author"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option
              v-for="(item, index) in statusItem"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="create_date" label="日期">
          <el-date-picker
            type="date"
            v-model="form.create_date"
            placeholder="选择日期"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="title" label="标题">
          <el-input v-model="form.title" class="top-title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="addQuestion"
            >新增试题</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="question-page">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
          <template v-slot="{ $index }">
            <div>{{ (pages.page - 1) * pages.size + $index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="题目" width="140">
          <template v-slot="scope">
            <div v-html="scope.row.title"></div>
          </template>
        </el-table-column>
        <el-table-column prop="subject_name" label="学科.阶段" width="100">
        </el-table-column>
        <el-table-column label="题型" width="100">
          <template v-slot="scope">
            {{ typeItem[scope.row.type] }}
          </template>
        </el-table-column>
        <el-table-column prop="enterprise_name" label="企业" width="100">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="140">
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template v-slot="scope">
            <div :class="{ active: scope.row.status === 0 }">
              {{ statusItem[scope.row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="reads" label="访问量" width="100">
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="text" @click="editQuestion(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="setQuestionStatus(scope.row)">{{
              statusItem[1 - scope.row.status]
            }}</el-button>
            <el-button type="text" @click="deleteQuestion(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[1, 2, 3, 5]"
        :page-size="pages.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        class="pages"
      >
      </el-pagination>
    </el-card>
    <AddQuestion
      ref="add"
      :subjectList="subjectList"
      :stepItem="stepItem"
      :enterpriseList="enterpriseList"
      :typeItem="typeItem"
      :diffItem="diffItem"
      @getQuestionList="getQuestionList"
    ></AddQuestion>
  </div>
</template>

<script>
import {
  getQuestionListAPI,
  deleteQuestionAPI,
  setQuestionStatusAPI,
  gitQuestionOneAPI
} from '@/api/question.js'
import { subjectList } from '@/api/studylist.js'
import { enterpriseList } from '@/api/business.js'
import AddQuestion from './components/add.vue'
const lodash = require('lodash')
export default {
  name: 'question',
  components: {
    AddQuestion
  },
  data () {
    return {
      form: {
        title: '',
        subject: '',
        enterprise: '',
        type: '',
        step: '',
        username: '',
        status: '',
        difficulty: '',
        create_date: ''
      },
      tableData: [],
      subjectList: [],
      enterpriseList: [],
      pages: {
        total: 10,
        page: 1,
        size: 1
      },
      typeItem: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      statusItem: {
        0: '禁用',
        1: '启用'
      },
      stepItem: {
        1: '初级',
        2: '中级',
        3: '高级'
      },
      diffItem: {
        1: '简单',
        2: '一般',
        3: '困难'
      }
    }
  },
  created () {
    this.getQuestionList()
    this.getSubjectList()
    this.getEnterpriseList()
  },
  methods: {
    async getQuestionList () {
      const params = {
        ...this.from,
        page: this.pages.page,
        limit: this.pages.size
      }
      const result = await getQuestionListAPI(params)
      // console.log('request', result)
      this.tableData = result.data.items
      this.pages.total = result.data.pagination.total
    },
    async getSubjectList () {
      const result = await subjectList()
      this.subjectList = result.data.items
    },
    async getEnterpriseList () {
      const result = await enterpriseList()
      this.enterpriseList = result.data.items
    },
    async deleteQuestion (row) {
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const result = await deleteQuestionAPI(row.id)
          if (result.message === 'ok') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getQuestionList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async setQuestionStatus (row) {
      const result = await setQuestionStatusAPI(row.id)
      if (result.message === 'ok') {
        this.$message.success('修改状态成功')
        this.getQuestionList()
      }
    },
    resetForm () {
      this.$refs.form.resetFields()
    },
    handleSearch () {
      this.pages.page = 1
      this.getQuestionList()
    },
    addQuestion () {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    async editQuestion (row) {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      row.select_options.forEach(item => {
        if (item.image) {
          item.image = 'http://119.91.150.211.8080/heimamm/public/' + item.image
        }
      })
      let newArr = []
      newArr = row.city.split(',')
      row.city = newArr
      // console.log(row)
      this.$refs.add.form = lodash.cloneDeep(row)
      console.log(this.$refs.add.form)
      // const result = await gitQuestionOneAPI(row.id)
      // console.log(result)
      // result.data.options.forEach(item => {
      //   if (item.image) {
      //     item.image = process.env.VUE_APP_BASE_API + item.image
      //   }
      // })
      // this.$refs.add.form = result.data
      // this.$refs.add.form.select_options = result.data.options
      // console.log(result)
    },
    handleSizeChange (size) {
      this.pages.size = size
      this.pages.page = 1
      this.getQuestionList()
    },
    handleCurrentChange (page) {
      this.pages.page = page
      this.getQuestionList()
    }
  }
}
</script>

<style lang="less">
.question {
  .question-top {
    height: 227px;
    .top-author {
      width: 202px;
    }
    .top-title {
      width: 388px;
    }
  }
  .question-page {
    .pages {
      margin-top: 31px;
      text-align: center;
    }
  }
  .active {
    color: red;
  }
}
</style>
